import React from "react";

import "./index.css";

// props = {
//     type: "string",
//     size: "number",
// }
export default props => {
  const icons = {
    cross: (
      <svg
        t="1573906322437"
        className="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2898"
        width={props.size}
        height={props.size}
      >
        <path
          d="M784.077 810.179a26.112 26.112 0 0 1-18.36-7.619L511.994 548.838 258.284 802.55a25.866 25.866 0 0 1-18.253 7.46 25.923 25.923 0 0 1-18.289-7.491c-4.956-4.884-7.716-11.407-7.767-18.365s2.611-13.522 7.49-18.478l253.681-253.681L221.44 258.284c-9.902-10.051-9.902-26.456 0.03-36.542a25.85 25.85 0 0 1 18.56-7.767 25.913 25.913 0 0 1 18.284 7.49L511.99 475.152 765.706 221.44c4.92-4.915 11.459-7.629 18.422-7.629s13.501 2.709 18.427 7.629a26.107 26.107 0 0 1-0.005 36.844L548.838 512 802.55 765.711a25.897 25.897 0 0 1 7.618 18.386 26.092 26.092 0 0 1-26.045 26.087h-0.046z"
          fill={props.color}
          p-id="2899"
        ></path>
      </svg>
    ),

    nike: (
      <svg
        t="1573906035257"
        className="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2125"
        width={props.size}
        height={props.size}
      >
        <path
          d="M344.283429 404.845714L240.859429 508.342857l217.234285 217.307429 381.366857-381.293715-103.424-103.424-277.942857 277.869715z"
          p-id="2126"
          //fill={props.color}
        ></path>
      </svg>
    ),

    star: (
      <svg
        t="1573909711682"
        className="icon"
        // class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3687"
        width={props.size}
        height={props.size}
      >
        <path
          d="M743.914 632.86l154.544-200.915-243.131-71.724-143.328-209.055-143.328 209.062-243.131 71.714 154.544 200.907-6.929 253.39 238.843-84.889 238.843 84.895-6.929-253.39zM512 883.789l-260.963 92.764c-32.373 11.503-57.867-6.913-56.918-41.354l7.573-276.855-168.86-219.533c-20.948-27.232-11.309-57.167 21.741-66.907l265.639-78.355 156.61-228.434c19.425-28.327 50.876-28.413 70.355 0l156.603 228.434 265.646 78.355c32.956 9.716 42.742 39.597 21.741 66.907l-168.86 219.533 7.573 276.855c0.932 34.348-24.451 52.895-56.918 41.354l-260.963-92.764z"
          fill={props.style.svgBackgroundColor || props.color}
          p-id="3688"
        ></path>
      </svg>
    ),

    star2: (
      <svg
        t="1573973086223"
        className="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3000"
        width={props.size}
        height={props.size}
      >
        <path
          d="M565.273 34.627L677.369 272.17c8.706 18.32 25.411 31.051 44.823 33.996l250.776 38.081c48.698 7.411 68.225 70.046 32.934 105.98L824.407 635.164c-13.998 14.23-20.352 34.815-17.059 54.935l42.82 261.127c8.346 50.696-42.643 89.452-86.226 65.519L539.634 893.474c-17.286-9.526-37.992-9.526-55.278 0l-224.314 123.27c-43.583 23.934-94.572-14.822-86.22-65.518L216.638 690.1c3.32-20.12-3.089-40.705-17.087-54.935L18.11 450.227c-35.285-35.934-15.818-98.574 32.934-105.98l250.75-38.081c19.35-2.94 36.082-15.675 44.756-33.996L458.673 34.627c21.825-46.168 84.836-46.168 106.6 0z"
          fill={props.style.svgBackgroundColor || props.color}
          p-id="3001"
        ></path>
      </svg>
    ),

    sun: (
      <svg
        t="1573978456620"
        className="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="7323"
        width={props.size}
        height={props.size}
      >
        <path
          d="M513.123 795.991c-76.156 0-147.753-29.658-201.603-83.508-53.849-53.849-83.504-125.444-83.504-201.596 0-76.153 29.657-147.749 83.504-201.598 53.85-53.851 125.446-83.508 201.603-83.508 76.147 0 147.742 29.658 201.593 83.508 53.853 53.852 83.511 125.447 83.511 201.598s-29.659 147.747-83.511 201.597c-53.852 53.85-125.445 83.507-201.593 83.507zM513.123 272.352c-131.529 0-238.534 107.007-238.534 238.535s107.006 238.533 238.534 238.533 238.533-107.005 238.533-238.533c0-131.529-107.006-238.535-238.533-238.535z"
          p-id="7324"
          fill={props.color}
        ></path>
        <path
          d="M513.123 149.007c-12.861 0-23.285-10.426-23.285-23.285v-91.359c0-12.861 10.426-23.285 23.285-23.285s23.285 10.426 23.285 23.285v91.358c0 12.862-10.426 23.286-23.285 23.286z"
          p-id="7325"
          fill={props.color}
        ></path>
        <path
          d="M513.123 1010.674c-12.861 0-23.285-10.426-23.285-23.285v-91.346c0-12.861 10.426-23.285 23.285-23.285s23.285 10.426 23.285 23.285v91.346c0 12.861-10.426 23.285-23.285 23.285z"
          p-id="7326"
          fill={props.color}
        ></path>
        <path
          d="M240.764 261.825c-5.959 0-11.919-2.274-16.466-6.821l-64.592-64.591c-9.094-9.093-9.094-23.838 0-32.931 9.093-9.094 23.838-9.094 32.931 0l64.593 64.592c9.094 9.093 9.094 23.838 0 32.931-4.546 4.545-10.507 6.82-16.467 6.82z"
          p-id="7327"
          fill={props.color}
        ></path>
        <path
          d="M850.050 871.111c-5.958 0-11.919-2.272-16.467-6.82l-64.593-64.593c-9.093-9.094-9.093-23.839 0-32.932 9.094-9.094 23.839-9.094 32.932 0l64.593 64.593c9.093 9.094 9.093 23.839 0 32.932-4.546 4.545-10.507 6.82-16.466 6.82z"
          p-id="7328"
          fill={props.color}
        ></path>
        <path
          d="M36.59 534.183c-12.861 0.001-23.286-10.423-23.289-23.283-0.001-12.861 10.423-23.286 23.283-23.289l91.348-0.011c12.861-0.001 23.286 10.423 23.289 23.283 0.001 12.861-10.423 23.286-23.283 23.289l-91.348 0.011z"
          p-id="7329"
          fill={props.color}
        ></path>
        <path
          d="M989.613 534.173h-91.346c-12.861 0-23.285-10.426-23.285-23.285s10.426-23.285 23.285-23.285h91.346c12.861 0 23.285 10.426 23.285 23.285s-10.426 23.285-23.285 23.285z"
          p-id="7330"
          fill={props.color}
        ></path>
        <path
          d="M176.173 871.122c-5.959 0-11.919-2.272-16.466-6.82-9.094-9.094-9.094-23.839 0-32.932l64.593-64.593c9.094-9.094 23.838-9.094 32.931 0s9.094 23.839 0 32.932l-64.593 64.593c-4.546 4.546-10.506 6.82-16.466 6.82z"
          p-id="7331"
          fill={props.color}
        ></path>
        <path
          d="M785.457 261.825c-5.959 0-11.918-2.272-16.467-6.821-9.094-9.094-9.093-23.838 0.001-32.931l64.593-64.592c9.094-9.093 23.838-9.094 32.931 0s9.093 23.838-0.001 32.931l-64.593 64.592c-4.545 4.546-10.506 6.821-16.465 6.821z"
          p-id="7332"
          fill={props.color}
        ></path>
      </svg>
    ),

    house: (
      <svg
        t="1573978849251"
        className="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="8409"
        width={props.size}
        height={props.size}
      >
        <path
          d="M992.7 563.1L511.9 82.3l-480.6 481 35.4 35.4L192 473.3v468.4h640V473.1l125.4 125.4 35.3-35.4zM413 891.7v-260h200v260H413z m369 0H663v-310H363v310H242V423.3l270.1-270.1L782 423.1v468.6z m-111.9-702l-50-50H815v196.1l-50-50v-96.1h-94.9z"
          fill={props.color}
          p-id="8410"
        ></path>
      </svg>
    ),

    circle: (
      <svg
        t="1573988244600"
        className="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2156"
        width={props.size}
        height={props.size}
      >
        <path
          d="M510.959 70.334c-243.334 0-440.596 197.245-440.596 440.597 0 243.319 197.264 440.596 440.596 440.596 243.317 0 440.597-197.275 440.597-440.596-0.001-243.353-197.28-440.597-440.597-440.597v0zM510.959 883.829c-205.936 0-372.902-166.943-372.902-372.897 0-205.961 166.965-372.902 372.902-372.902 205.959 0 372.901 166.943 372.901 372.902 0 205.953-166.943 372.897-372.901 372.897v0zM510.959 883.829z"
          p-id="2157"
          fill="rgb(5, 66, 146)"
        ></path>
      </svg>
    ),

    add: (
      <svg
        t="1573991203042"
        className="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2945"
        width={props.size}
        height={props.size}
      >
        <path
          d="M516.608 876.544c-20.992 0-41.472-4.608-41.472-26.624V549.376H179.2c-16.896 0-26.624-15.872-26.624-36.352 0-18.944 7.168-36.864 25.088-36.864h302.08V179.2c0-19.968 14.848-31.232 36.864-31.232 20.48 0 36.352 9.216 36.352 26.624V471.04h305.664c20.48 0 21.504 24.576 21.504 41.472s-5.632 36.352-26.112 36.352H552.96V849.92c0.512 17.408-15.36 26.624-36.352 26.624z"
          fill={props.color}
          p-id="2946"
        ></path>
      </svg>
    )
  };
  return (
    <div
      className="icon_container"
      onClick={props.onClick}
      style={{
        width: props.size,
        height: props.size,
        borderRadius: props.size,
        ...props.style
      }}
    >
      {icons[props.type] || null}
    </div>
  );
};
